<template>
    <template v-if="muitple">
        <a-upload
            v-model:file-list="statefileList"
            name="file"
            :before-upload="beforeUpload"
            :progress="progress"
            :maxCount="3"
        >
            <a-button>
                <upload-outlined></upload-outlined>
                点 击 此 处 上 传
            </a-button>
            <template #itemRender="{ actions }">
                <div v-for="file in statefileList" :key="file.uid">
                    <span>{{ file.name }}</span>
                    <a-button type="link" @click="actions.remove">移除</a-button>
                    <div
                        :style="{
                            width: percent + '%',
                            height: '2px',
                            background: 'red',
                            transition: 'all 0.8s',
                            opacity: opacity
                        }"
                    ></div>
                </div>
            </template>
        </a-upload>
    </template>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
import { UploadOutlined } from '@ant-design/icons-vue'
import { message, Upload } from 'ant-design-vue'
export default defineComponent({
    name: 'uploadFile',
    props: {
        muitple: {
            type: Boolean,
            default: false
        }
    },
    setup() {
        const components = {
            UploadOutlined
        }
        const constants = {
            muitple: true,
            progress: {
                strokeColor: {
                    '0%': '#108ee9',
                    '100%': '#87d068'
                },
                strokeWidth: 3,
                format: (percent: any) => `${parseFloat(percent.toFixed(2))}%`,
                class: 'test'
            }
        }
        const state = reactive({
            statefileList: [] as any,
            maxSize: 6,
            percent: 1,
            muitple: true,
            opacity: 0
        })
        const methods = {
            beforeUpload(file: any, fileList: any) {
                if (methods.isMaxSize(fileList)) {
                    message.error(`文件最大为${state.maxSize}M`)
                    return Upload.LIST_IGNORE
                }
                if (methods.isTrueType(fileList)) {
                    message.error('文件类型应为mp4格式')
                    return Upload.LIST_IGNORE
                }
                methods.setSateFileList(fileList)
                methods.ReadFile(state.statefileList)
                console.log(fileList)
            },
            isMaxSize(fileList: any) {
                return fileList.some((item: any) => item.size / 1024 / 1024 > state.maxSize)
            },
            isTrueType(fileList: any) {
                return fileList.some((item: any) => item.type.split('/')[1] !== 'mp4')
            },
            setSateFileList(fileList: any) {
                if (state.statefileList && state.statefileList.length) state.statefileList = []
                fileList.forEach((el: any) => {
                    state.statefileList.push({ ...el, percent: 0 })
                })
            },
            ReadFile(StatefileList: any) {
                StatefileList.forEach((el: any) => {
                    state.opacity = 1
                    state.percent = 5
                    setTimeout(() => {
                        state.percent = 100
                        state.opacity = 0
                        message.success('上传成功!')
                    }, 2000)
                    // const reader = new FileReader();
                    const formdata = new FormData()
                    formdata.append('resource', el)
                    methods.SendFile(formdata)
                })
            },
            SendFile(formdata: any) {
                console.log(formdata)
            }
        }
        return {
            ...methods,
            ...constants,
            ...toRefs(state),
            ...components
        }
    }
})
</script>
<style scoped lang="scss">
$default_color: #ccc;
$hover_color: #00b3ff;
$border_radius: 10px;

.file {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    border: 2px dashed $default_color;
    display: flex;
    justify-content: center;
    position: relative;
    align-items: center;
    font-size: 20px;
    color: #ccc;
    transition: all 0.3s;
    border-radius: $border_radius;
    cursor: pointer;

    &:hover {
        border-color: $hover_color;

        &::before {
            transform: perspective(500px) translate(-50%, -50%) rotate(180deg);
            background-color: $hover_color;
            width: 80%;
        }

        &::after {
            transform: perspective(500px) translate(-50%, -50%) rotate(90deg);
            background-color: $hover_color;
            width: 80%;
        }

        .del {
        }
    }

    &::after,
    &::before {
        content: '';
        position: absolute;
        display: block;
        width: 60%;
        height: 8%;
        background-color: $default_color;
        top: 50%;
        left: 50%;
        border-radius: 50%;
        transition: all 0.5s;
        z-index: 1;
    }

    &::after {
        transform: translate(-50%, -50%);
    }

    &::before {
        transform: translate(-50%, -50%) rotate(90deg);
    }

    input {
        // visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        width: 100%;
        height: 100%;
        z-index: 3;
    }

    img {
        width: 100%;
        height: 100%;
        padding: 5px;
        object-fit: cover;
        z-index: 2;
        background-color: white;
        border-radius: $border_radius;
    }

    .del {
        position: absolute;
        color: black;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 4;
        cursor: pointer;
        font-size: 15px;
        transition: all 0.3s;
        --color: red;
    }
}
</style>
